<template>
	<view class="main">
		<view class="u-flex u-col-top u-row-between u-p-l-40 u-p-r-40 u-p-t-40">
			<view class="" style="color: white;">
				<view class="u-font-32" style="font-weight: 400;">账户总金额(元)</view>
				<view style="font-weight: 700;font-size: 48rpx;">{{totalPriceNum}}</view>
			</view>
			<view style="display: flex;flex-direction: column;align-self:center;">
				<!-- <view class="btn bg1" @click="draw">提现</view> -->
			</view>
		</view>

		<view class="u-flex inner">
			<view class="u-flex-1" style="border-right: 1rpx solid #fff;">
				<view class="value">{{objData.balance}}</view>
				<view class="label">可用金额(元)</view>
			</view>
			<view class="u-flex-1">
				<view class="value">{{objData.unBalance}}</view>
				<view class="label">冻结金额(元)</view>
			</view>
		</view>
	</view>


	<view class="main main2">
		<view class="u-flex u-col-top u-row-between u-p-l-40 u-p-r-40 u-p-t-40">
			<view class="" style="color: white;">
				<view class="u-font-32" style="font-weight: 400;">历史提现(元)</view>
				<view style="font-weight: 700;font-size: 48rpx;">{{cashObj.cashCount}}</view>
			</view>
			<view style="display: flex;flex-direction: column;align-self:center;">
				<view class="btn bg1" @click="cash">明细</view>
			</view>
		</view>

		<view class="u-flex inner">
			<view class="u-flex-1" style="border-right: 1rpx solid #fff;">
				<view class="value">{{cashObj.cashingCount}}</view>
				<view class="label">提现中(元)</view>
			</view>
			<view class="u-flex-1">
				<view class="value">{{cashObj.cashMouthCount}}</view>
				<view class="label">本月已提现(元)</view>
			</view>


		</view>
	</view>

	<view class="title u-flex u-row-between">
		<text>收入明细</text>
		<u-icon @click="show = true" class="u-m-r-28" name="arrow-down-fill" label-pos="left" label-color="#ffc405"
			:label="form.beginMonth||'筛选'"></u-icon>
	</view>

	<view class="newList" @click="detail(item)" v-for="(item,index) in list" :key="index">
		<u-avatar :src="item.businessLogo"></u-avatar>
		<view>
			<view class="row">
				<text class="name">{{item.orderBusinessName}}</text>
				<text class="num">+{{item.userGain}}</text>
			</view>
			<view class="row">
				<text class="date">{{item.createDate}}</text>
				<text class="tips">
					<text  style="color:blue;" v-if="item.splitState ==1">
						<block >待分账</block>
					</text>
					<text  style="color: green;" v-else-if="item.splitState ==5">
					<block >已分账</block>
					</text>

					<text  style="color:red ;" v-else-if="item.splitState ==10">
						<block>分账失败</block>
					</text>
				</text>
			</view>
		</view>
	</view>

	<!-- <view class="newList">
		<view class="u-flex newList_item" v-for="(item,index) in list" :key="index">
			<u-avatar></u-avatar>
			<view @click="detail(item)" class=" u-flex-1" >
				<view class="newList_item_left">
					<view class="num" style="color:blue;" v-if="item.splitState ==1">
						<block >待分账</block>
					</view>
					<view class="num" style="color: green;" v-else-if="item.splitState ==5">
					<block >已分账</block>
					</view>

					<view class="num" style="color:red ;" v-else-if="item.splitState ==10">
						<block>分账失败</block>
					</view>
					<view>订单号:{{item.orderNo}}</view>
				</view>
				<view class="newList_item_right " style="text-align: right;">
					<view class="tips">+{{item.companySplitAmount}}</view>
					<view>{{item.createDate.split(" ")[0]}}</view>
				</view>
			</view>
		</view>

	</view> -->

	<view class=" u-p-t-35">
		<u-empty text="暂无收入记录" v-if="list.length==0"></u-empty>
	</view>

	<!-- 日期选择 -->
	<u-picker v-model="show" mode="time" :default-time="defaulTime" :params="params" @confirm="timeConfirm" @cancel="timeCancel"></u-picker>

</template>

<script setup lang="ts">
	import { onReady, onReachBottom, onLoad ,onShow} from '@dcloudio/uni-app'
	import { computed, reactive, ref } from "vue";
	import shopApi from '@/api/shop'
	import enumIndex from '@/enum/index'
	import moment from 'moment'

	const show = ref(false)
	const defaulTime = ref("")
	const params = reactive({
		year: true,
		month: true
	})

	function cash() {
		uni.navigateTo({
			url:'/subpackage/my/fund/cash'
		})
	}


	const cashObj = reactive({
		cashCount:'',
		cashMouthCount:'',
		cashingCount:''
	})

	const form = reactive({
		beginMonth: "",
		pageNo: 1,
		pageSize: 20,
	})

	const objData = reactive({
		balance: 0,
		cashOutAmount: 0,
		cashOuting: 0
	})

	const list = ref([])

	const getList = (type = "") => {
		if (type === 'reset') {
			list.value = []
			form.pageNo = 1
		}
		shopApi.getCashOutPage(form).then(res => {
			if (res.data.total > list.value.length) {
				list.value.push(...res.data.list)
				form.pageNo++
			}

		})
	}

	const getDetail = () => {
		shopApi.getCashOutAmount().then(res => {
			Object.assign(objData, res.data)
		})
	}

	const timeConfirm = (e) => {
		form.beginMonth = e.year+"-"+e.month
		defaulTime.value = form.beginMonth
		getList('reset')

	}
	const timeCancel = (e)=>{
		form.beginMonth = ""
		defaulTime.value = moment().format('YYYY-MM')
		getList('reset')
	}
	function detail(item){
		uni.$u.route({
			url:'/subpackage/my/fund/detail',
			params:{
				id:item.splitInfoId
			}
		})
	}

	const draw = () => {
		if (objData.balance <= 0.3) {
			uni.showToast({
				title: '可用金额不足',
				icon: 'none'
			})
		} else {
			uni.navigateTo({
				url: '/subpackage/my/fund/draw'
			})
		}
	}

	onLoad(() => {
		getList()

	})
	onShow(()=>{
		shopApi.statistics().then(res=>{
			Object.assign(cashObj,res.data)
		})
		getDetail()
	})

	onReachBottom(() => {
		getList()
	})

	const totalPriceNum = computed(()=>{
		return (objData.balance+objData.unBalance).toFixed(2)
	})


	onReady(() => {
		defaulTime.value = moment().format('YYYY-MM')
	})
</script>

<style lang="scss" scoped>

	.newList{
		display: flex;
		background-color: white;
		margin: 24upx 28upx;
		padding: 25upx 20upx;
		box-shadow: 0 4upx 18upx rgba(0, 0, 0, .1);
		border-radius: 12upx;
		>view{
			flex: 1;
			padding-left: 22upx;
			display: flex;
			flex-direction: column;

			.row{
				flex: 1;
				display: flex;
				justify-content: space-between;
				.name{
					font-size: 30upx;
					color: #2e2e2e;
				}
				.num{
					font-size: 35upx;
					color: #e93b3b;
				}
				.date{
					font-size: 24upx;
					color: #9f9ea5;
				}
				.tips{
					font-size: 26upx;

				}
			}
		}
	}

	.main {
		margin: 20upx auto;
		width: 690upx;
		min-height: 220upx;
		border-radius: 18upx;
		// background-color: linear-gradient;
		background-image: linear-gradient(140deg, #ffc30090 0%, #ffc300 75%);

		.btn {
			width: 180upx;
			height: 50upx;
			line-height: 50upx;
			text-align: center;
			border-radius: 18upx;
			font-weight: 600;

		}

		.btn.bg1 {
			background-color: #fff;
			color: #ffc300;
		}

		.btn.bg2 {
			border: 1upx solid #fff;
			color: #fff;
		}

		.inner {
			text-align: center;
			padding-top: 40upx;
			padding-bottom: 20upx;

			.value {
				font-size: 38upx;
				font-weight: 500;
				color: white;
			}

			.label {
				font-size: 28upx;
				color: white;
			}
		}
	}

	.main.main2 {
		background-image: none;
		background-color: #45a5ff;

	}

	.title {
		font-size: 32upx;
		// color: #121b2d;
		color: #ffc405;
		font-weight: 600;
		padding-left: 55upx;
		position: relative;
		margin-top: 60upx;
	}

	.title::after {
		content: '';
		position: absolute;
		left: 28upx;
		top: 50%;
		transform: translateY(-50%);
		display: block;
		width: 6upx;
		height: 36upx;
		background-color: #ffc405;
	}

	.list {
		margin: 0 34upx;
		padding: 28upx 24upx;
		border-bottom: 1upx solid #e4e4e4;

		display: flex;
		align-items: center;
		justify-content: space-between;

		.lf {
			.name {
				font-size: 32upx;
				color: #4c4c4c;
			}

			.desc {
				color: #999999;
				font-size: 26upx;
				margin-top: 6upx;
			}
		}

		.ri {
			font-size: 48upx;
			color: #f64f4f;

			text {
				font-size: 38upx;
			}
		}
	}
</style>
